<template>
   <div class="container">
    <div class="swiper">
        <mt-swipe :auto="4000" class="banners">
        <mt-swipe-item v-for="banner in banners" :key="banner.img_src">
            <img :src="banner.imgSrc|absUrl" @click="showLink(banner.linkAddr)" :alt="banner.title">
        </mt-swipe-item>                
        </mt-swipe>
        <img src="../../assets/icons/topbar@2x.png" alt="" class="topbar-img">
    </div>
    <div class="box1">
        <div class="flex">
            <router-link class="flex-con" tag="div" :to="{path:'question'}">
                <img src="../../assets/icons/info@2x.png" alt="" class="question-icon">
                <div class="link-txt">常见问题</div>                                
            </router-link>
            <div class="seprator"></div>
            <router-link class="flex-con" tag="div" :to="{path:'feedback'}">
                <img src="../../assets/icons/advise@2x.png" alt="" class="advise-icon">
                <div class="link-txt">问题反馈</div>                
            </router-link>
        </div>
    </div>
    <div class="box1">
        <div class="flex">
            <router-link class="flex-con" tag="div" :to="{path:'feedback'}">
                <img src="../../assets/icons/ts@2x.png" alt="" class="ts-icon">
                <div class="link-txt">投诉建议</div>                                
            </router-link>
            <div class="seprator"></div>
            <a class="flex-con block" href="tel:400-628-8333">
                <img src="../../assets/icons/kf@2x.png" alt="" class="kf-icon">
                <div class="link-txt">在线客服</div>                
            </a>
            <!-- <router-link class="flex-con" tag="div" :to="{path:'kf'}">
                <img src="../../assets/icons/kf@2x.png" alt="" class="kf-icon">
                <div class="link-txt">在线客服</div>                
            </router-link> -->
        </div>
    </div>
    <div class="swpier2">
        <img src="../../assets/icons/bottombar@2x.png" alt="" class="bottombar-img">
        <mt-swipe :auto="4000" class="banners2">
            <mt-swipe-item v-for="banner in banners2" :key="banner.imgSrc">
                <img :src="banner.imgSrc | absUrl" @click="showLink(banner.linkAddr)">
            </mt-swipe-item>                
        </mt-swipe>
    </div>
   </div>
</template>
<style scoped lang="scss">
.advise-icon {
  width: 1.0933rem;
  height: 1.1067rem;
}
 .block{
  text-decoration: none;
}
.question-icon {
  width: 1.12rem;
  height: 1.12rem;
}
.box1 {
  padding: 0.6rem 0 1.1067rem 0;
  border-bottom: 1px solid #e8e8e8;
  text-align: center;
}
.kf-icon {
  width: 1.1067rem;
  height: 1.1067rem;
}
.seprator {
  width: 0.0933rem;
  height: 2.0933rem;
  background-color: rgba(232, 232, 232, 0.75);
}
.link-txt {
  font-size: 0.3733rem;
  color: #333;
  padding-top: 0.32rem;
}
.ts-icon {
  width: 1.12rem;
  height: 1.12rem;
}
$swiper1Height: 4.14rem;
.banners {
  height: $swiper1Height;
}
.banners2 {
  height: 3.1733rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.banners2 img {
  height: 3.1733rem;
  width: 100%;
}
.swpier2 {
  height: 3.826rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.swiper {
  height: $swiper1Height;
  position: relative;
}
.bottombar-img {
  position: absolute;
  top: 0;
  z-index: 900;
  left: 0;
  width: 100%;
}
.banners img {
  height: $swiper1Height;
  width: 100%;
}

.topbar-img {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
<script>
export default {
   
  data() {
    return {
      banners: [],
      banners2:[]
    };
  },
  methods:{
    showLink(addr){
       if(addr){
         location.href = addr;
       }
    }
  },
  created() {
    this.$get('/api/ad?pid=1').then(data=>{
       this.banners = data
    })
    this.$get('/api/ad?pid=0').then(data=>{
      this.banners2 = data
    })
  }
};
</script>

